<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <a href="/home" onclick="return false" @click="back">首页</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-empty v-if="this.tableData.length === 0" :image-size="400" description="空空如也哦~~~"></el-empty>
    <div v-else>
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unload_time"
          label="上传日期"
          width="180"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.unload_time | dataFormat }}
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          align="center">
        </el-table-column>
        <el-table-column
          prop="like"
          label="点赞量"
          align="center">
        </el-table-column>
        <el-table-column
          prop="collect"
          label="收藏量"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              @click="handleDialog(scope.row)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="removeById(scope.row._id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handlePagenumChange"
        background
        layout="prev, pager, next"
        :total="this.total"
        :page-size="10"
        :hide-on-single-page="false">
      </el-pagination>
    </div>
    <el-dialog title="文章编辑" :visible.sync="dialogFormVisible">
      <el-form :model="articalForm">
        <el-form-item label="文章标题：" label-width="90px">
          <el-input v-model="articalForm.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" label-width="90px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 15}"
            placeholder="请输入内容"
            v-model="articalForm.content">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeById">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      pageNum: 1,
      articalForm: {
        id: '',
        title: '',
        content: ''
      },
      total: 0
    }
  },
  created () {
    this.getArticalList()
  },
  methods: {
    getForm (data) {
      this.articalForm.id = data._id
      this.articalForm.title = data.title
      this.articalForm.content = data.content
    },
    back () {
      this.$router.push('/home')
      this.$store.state.activePath = '/home'
    },
    async getArticalList () {
      const { data: res } = await this.$http.get(`/artical?pagenum=${this.pageNum}`)
      if (res.status !== 200) return this.$message.error('获取文章列表失败')
      this.tableData = res.data
      this.total = res.total
      if (res.data.length === 0 && this.pageNum !== 1) {
        this.pageNum -= 1
        this.getArticalList()
      }
    },
    handleDialog (data) {
      this.dialogFormVisible = true
      this.getForm(data)
    },
    handlePagenumChange (val) {
      this.pageNum = val
      this.getArticalList()
    },
    async removeById (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete(`/artical?id=${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除文章失败！')
      }
      this.$message.success('删除文章成功！')
      this.getArticalList()
    },
    async changeById () {
      const { data: res } = await this.$http.post('/artical', this.articalForm)
      if (res.status !== 200) return this.$message.error('修改文章失败！')
      this.dialogFormVisible = false
      this.$message.success('修改文章成功')
      this.getArticalList()
    }
  }
}
</script>

<style scoped>

</style>
